<template>
    <div class="wrapper">
        <top-header title="添加车辆"></top-header>
        <div class="content">
            <bui-cell label="汽车品牌" >
                <text class="car_info_input" @click="carBrand">{{selectStyles.name}}</text>
            </bui-cell>
            <!-- <bui-cell label="车系" >
                <text class="car_info_input" @click="carSeries">{{selectSeries.name}}</text>
            </bui-cell>
            <bui-cell label="款式" >
                <text class="car_info_input" @click="carStyles">{{selectStyles.name}}</text>
            </bui-cell> -->
            <bui-cell label="联系人" >
                <input type="text" class="car_info_input" ref="input1" v-model="addCarParam.ownername" placeholder="请输入联系人"/>
            </bui-cell>
            <bui-cell label="联系方式" >
                <input type="number" class="car_info_input" ref="input2" max-length="11" v-model="addCarParam.ownerphone" placeholder="请输入联系方式"/>
            </bui-cell>
            <div class="button">
                <wxc-button text="确认"
                    @wxcButtonClicked="next" :btnStyle="btnStyle"></wxc-button>
            </div>
        </div>
        <am-popup
            :show.sync="isLeftShow"
            :position="position"
            :offset="offset"
            :auto-close="autoClose"
            :popup-style="style"
            width="500"
            height="900"
        >
            <list>
                <cell class="cell" v-for="item in list" @click="select(item)">
                    <div class="list_cont">
                        <text class="list_cont_text">{{item.brandEn}}  </text>
                        <image :src="item.brandPic" v-if="item.brandEn" class="list_cont_img"></image>
                        <text class="list_cont_text">  {{item.name}}</text>
                    </div>
                </cell>
            </list>
        </am-popup>
    </div>
</template>
<script>
import { WxcRadio, WxcCheckboxList, WxcPageCalendar, WxcButton } from 'weex-ui';
import { AmPopup } from 'weex-amui';
import { buiCell} from 'bui-weex';
const animation = weex.requireModule('animation')
import utilFunc from '../../utils/util'
import header from '../../common/header'
export default {
    components: { WxcRadio, WxcCheckboxList, WxcPageCalendar, WxcButton, AmPopup,buiCell, 
        'top-header': header, 
    },
    data () {
        return {
            token: '',
            list: [],
            selectBrand: { name: '请选择品牌' },
            selectSeries: { name: '请选择车系' },
            selectStyles: { name: '请选择款式' },
            btnStyle: {
                'background-color': '#1E90FF',
            },
            selecData: '',
            carSeriesList: [],
            carBrandList: [],
            carStylesList: [],
            addCarParam: {
                'brandid': '',  // 品牌
                'seriesid': '',  // 车系
                'styleid': '',  // 款式
                'ownername': '',  // 车主
                'ownerphone': '',  // 车主电话
            },
            isShowLoad: false,
            isLeftShow: false,
            position: 'bottom',
            offset: {},
            autoClose: true,
            style: {},
        }
    },
    created () {
        this.getBrandList() // 获取车品牌
        let user = this.$storage.getSync('UserInfo')
        this.token = user.token
        this.addCarParam.ownerphone = user.mobile
        // this.$notice.toast({ message: user.id})
    },
    mounted () {
    },
    methods: {
        // 返回
        back () {
            this.$router.back();
        },
        // 滑动事件
        swipePop (e) {
            if (e.direction == 'left') {
                this.hide()
            }
        },
        hide () {
            // this.sideAnima(-750, 800);
            this.isLeftShow = false
        },
        sideAnima (trans, time) {
            var sideEl = this.$refs.side;
            animation.transition(sideEl, {
                styles: {
                    transform: 'translateX(' + trans + 'px)',
                    transformOrigin: 'left center'
                },
                duration: time, //ms
                timingFunction: 'ease',
                delay: 0 //ms
            }, function () {
            })
        },
        select (item) {
            switch (this.selecData) {
                case 1: // 车系
                    this.selectSeries = item
                    this.addCarParam.seriesid = item.seriesId
                    this.getStylesList() // 获取款式
                    break
                case 2: // 品牌
                    this.selectBrand = item
                    this.addCarParam.brandid = item.brandId
                    this.getSeriesList() // 获取车系
                    break
                case 3: // 款式
                    this.selectStyles = item
                    this.addCarParam.styleid = item.stylesId
                    this.hide()
                    break
                default:
                    break
            }
        },
        // 调取侧栏
        showSide (list, num) {
            this.selecData = num
            this.list = list
            // this.sideAnima(750, 800);
            this.isLeftShow = true
        },
        // 封装数据
        dataPack (dataList, name) {
            for (let i = 0, length = dataList.length; i < length; i++) {
                dataList[i].name = dataList[i][name]
            }
            return dataList
        },
        
        next () {
            if (!this.validterParam()) {
                return
            }
            let vm = this;
            var userInfo = this.$storage.getSync('UserInfo');

            this.token = userInfo.token;
            this.$fetch({
                method: 'POST',    // 大写
                name: 'maintenanceCar.create', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: this.addCarParam,
                header: {
                    'X-TMACW-APP-Token': this.token
                }
            }).then(resData => {
                this.$event.emit('newCarInfo',resData.data)
                // 成功回调
                console.log("yk"+JSON.stringify(resData))
                if(resData && resData.errno == 0){
                    this.$notice.toast({ message: '添加成功'})
                    this.back()
                }
            }, error => {
                // 错误回调
                console.log(error)
            })
        },
        // 查询汽车品牌
        getBrandList () {
            this.$fetch({
                method: 'POST',    // 大写
                name: 'brand.list', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {}
            }).then(resData => {
                // 成功回调
                this.isShowLoad = false;
                console.log(resData)
                if(resData && resData.errno == 0){
                    this.carBrandList = this.dataPack(resData.data.brandList, 'brandName')
                }
            }, error => {
                // 错误回调
                this.isShowLoad = false;
                console.log(error)
            })
        },
        // 选择汽车品牌
        carBrand () {
            this.blur()
            this.showSide(this.carBrandList, 2)
        },
        // 查询车系
        getSeriesList () {
            this.$fetch({
                method: 'POST',    // 大写
                name: 'series.list', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {
                    brand_id: this.selectBrand.brandId
                }
            }).then(resData => {
                // 成功回调
                this.isShowLoad = false;
                console.log(resData)
                // this.$notice.toast({ message: resData.data})
                if(resData && resData.errno == 0){
                    this.carSeriesList = this.dataPack(resData.data, 'seriesName')
                    this.hide()
                    this.showSide(this.carSeriesList, 1)
                }
            }, error => {
                // 错误回调
                this.isShowLoad = false;
                console.log(error)
            })
        },
        // 选择车系
        // carSeries () {
        //     if (!this.selectBrand.brandId) {
        //         this.$notice.toast({ message: "请选择品牌"})
        //         return
        //     }
        //     this.showSide(this.carSeriesList, 1)
        // },
        // 查询款式
        getStylesList () {
            this.$fetch({
                method: 'POST',    // 大写
                name: 'styles.list', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {
                    brand_id: this.selectBrand.brandId,
                    series_id: this.selectSeries.seriesId
                }
            }).then(resData => {
                // 成功回调
                this.isShowLoad = false;
                console.log(resData)
                if(resData && resData.errno == 0){
                    this.carStylesList = this.dataPack(resData.data, 'stylesName')
                    this.showSide(this.carStylesList, 3)
                } else {
                    // this.$notice.toast({ message: resData.errmsg})
                }
            }, error => {
                // 错误回调
                this.isShowLoad = false;
                console.log(error)
                // this.$notice.toast({ message: "登录失败, 请重试"})
            })
        },
        // 选择款式
        // carStyles () {
        //     if (!this.selectSeries.seriesId) {
        //         this.$notice.toast({ message: "请选择车系"})
        //         return
        //     }
        //     this.showSide(this.carStylesList, 3)
        // },
        // 校验值
        validterParam () {
            if (!this.addCarParam['brandid']) {
                this.$notice.toast({ message: '请选择品牌'})
                return false
            } else if (!this.addCarParam['seriesid']) {
                this.$notice.toast({ message: '请选择车系'})
                return false
            } else if (!this.addCarParam['styleid']) {
                this.$notice.toast({ message: '请选择款式'})
                return false
            } else if (!this.addCarParam['ownername']) {
                this.$notice.toast({ message: '请填写车主姓名'})
                return false
            } else if (!this.addCarParam['ownerphone']) {
                this.$notice.toast({ message: '请填写车主电话'})
                return false
            }else if (!utilFunc.checkIsHasSpecialStr(this.addCarParam['ownername'])) {
                    this.$notice.toast({ message: '联系人姓名只能是汉字或字母'})
                    return false
                }
            return true
        },
        // 输入框失去焦点
        blur () {
            if (this.$refs.input1) 
                this.$refs.input1.blur()
            if (this.$refs.input2) 
                this.$refs.input2.blur()
        }
    }
}
</script>
<style>
.iconfont {
    font-family: iconfont;
}
.wrapper{
    background-color: #fff;
}
.content{
    background-color: #fff;
    height: 1334px;
}
.cont_car_brand {
    align-items: flex-start;
    flex-direction: row;
    padding-top: 10px;
}
.car_brand_fir1{
    width: 160px;
    text-align: center;
    color: #666;
    height: 60px;
    line-height: 60px;
}
.car_brand_info{
    width: 460px;
    margin-bottom: 20px;
}
.border {
    border-style: solid;
    border-width: 1px;
    border-color: #666;
    border-radius: 6px;
}
.bottom{
    padding-bottom: 20px;
    border-bottom-style: solid;
    border-bottom-color: #eee;
    border-bottom-width: 1px;
}
.select_box{
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #666;
    margin-right: 16px;
    padding-right: 16px;
    padding-left: 16px;
}

.input_box{
    height: 60px;
    line-height: 60px;
    color: #666;
    margin-right: 16px;
    padding-right: 16px;
    padding-left: 16px;
}

.button{
    align-items: center;
    margin-top: 40px;
    margin-bottom: 40px;
}
/* 左侧弹窗 */
.side_pop{
    position: absolute;
    top: 138px;
    background-color: #fff;
    width: 750px;
    height: 1334px;
    left: -750px;
}
.cell{
    width: 750px;
    border-bottom-color: #eee;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}
.list_cont{
    height: 100px;
    margin-left: 20px;
    flex-direction: row;
    align-items: center;
}
.list_cont_img{
    width: 50px;
    height: 50px;
    margin-right: 20px;
}
.list_cont_text{
    color: #333;
    font-size: 30px;
}
.car_info_input{
    width: 500px;
    border-style: solid;
    border-width: 1px;
    border-color: #fff;
    border-radius: 5px;
    height: 70px;
    line-height: 70px;
    padding-left: 10px;
    outline-color: #fff;
}
</style>
